<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标与购物车</title>
    <link rel="stylesheet" href="./font/font_2u1b3wftes6/iconfont.css" type="text/css">
    <style>
        html{
            background-color: antiquewhite;
        }
        .num {
            width: 30px;
            height: 30px;
            position: absolute;
            display: inline-block;
            border-radius: 100px;
            top: 3px;
            right: 3px;
            background-color: red;
            font-size: 20px;
            color: antiquewhite;
            text-align: center;
        }

        .good {
            position: relative;
            width: 150px;
            height: 150px;
            display: inline-block;
            cursor: pointer;
            top: 300px;
            font-size: 0;
        }
        .introduce {
            position: relative;
            width: 150px;
            height: 150px;
            float:left;
            cursor: pointer;
            top: 300px;
        }

        .item {
            background-image: url(image/商品2.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .item2 {
            background-image: url(image/商品3.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .item3 {
            background-image: url(image/商品4.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .item4 {
            background-image: url(image/商品6.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .item5 {
            background-image: url(image/商品7.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .item6 {
            background-image: url(image/商品8.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .item7 {
            background-image: url(image/商品9.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .item8 {
            background-image: url(image/商品10.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>


    <div class="iconfont icon-gouwuche">
    </div>
    <div class="num" id="num"></div>
    <div class="introduce">点击图片购入--><br>
    <!-- 你问为什么图片上会有1？<br> -->
    <!-- 那是因为要用innerHTML为1的字符串来进行加法计算<br>
    才能让购物车加一 -->
    </div>
    <div class="good item" onclick="clickit(this)">1</div>
    <div class="good item2" onclick="clickit(this)">1</div>
    <div class="good item3" onclick="clickit(this)">1</div>
    <div class="good item4" onclick="clickit(this)">1</div>
    <div class="good item5" onclick="clickit(this)">1</div>
    <div class="good item6" onclick="clickit(this)">1</div>
    <div class="good item7" onclick="clickit(this)">1</div>
    <div class="good item8" onclick="clickit(this)">1</div>

    <script>
        var num = document.getElementById("num")

        var i="0"
        num.innerHTML = ""
        function clickit(e) {
            i += "+"+e.innerHTML
            num.innerHTML = eval(i)

        }
    </script>
</body>

</html>